<template>
  <ad-table v-bind="tableConfig" :fixedheader="false" ref="tableRef">
    <template #search>
      <ad-form v-bind="searchFormConfig" :inline="true"></ad-form>
    </template>
    <template #total>
      <span>支付总金额</span>
      : 1000
      <span>元支付总手续费元支付总手续费</span>
      ： 30000 元
    </template>
  </ad-table>
</template>
<script setup lang="ts">
import {
  bankCardFormat,
  cardFormat,
  isCard,
  isMobile,
  isSMs,
  mobileFormat,
  noNumericToBlank,
} from "@fe-hl/utils";
import { reactive, ref, getCurrentInstance } from "vue";

// 快捷选择
const shortcuts = [
  {
    text: "一周内",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "一个月内",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "三个月内",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
  {
    text: "一年内",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
      return [start, end];
    },
  },
];
// 直接范围一年内，不能过过当前时间
const disabledDate = (time: Date) => {
  const curDate = new Date().getTime();
  const three = 365 * 24 * 3600 * 1000;
  const threeMonths = curDate - three;
  return time.getTime() > Date.now() || time.getTime() < threeMonths;
};

let Instance: any = getCurrentInstance()?.proxy;
let tableRef = ref();
let tableConfig = reactive({
  searchParams: {},
  reqApiMethod: () =>
    Promise.resolve({
      total: 2,
      rows: [
        {
          userId: "10003",
          phone: "17635353555",
          image:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F1208%2F1300%2Fntk-1300-31979.jpg&refer=http%3A%2F%2Fimg2.niutuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666517545&t=a5d8312a1410b5275305c469b5af556f",
        },
        {
          userId: "10002",
          phone: "17635353888",
          image:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F1208%2F1300%2Fntk-1300-31979.jpg&refer=http%3A%2F%2Fimg2.niutuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666517545&t=a5d8312a1410b5275305c469b5af556f",
        },
      ],
    }),
  butClickEvent: (config, rows) => {
    console.log(config, rows);
    Instance.$AdDialogForm({
      title: "新增",
      formConfig: formConfig,
    });
  },
  headerButs: [
    {
      butType: "CREATE",
      name: "新增",
      color: "primary",
      permi: [],
      icon: "Plus",
    },
    {
      butType: "UPDATE",
      name: "修改",
      enable: "1",
      color: "success",
      permi: [],
      icon: "Edit",
    },
    {
      butType: "EXPORT",
      name: "导出",
      color: "warning",
      permi: [],
      icon: "Download",
    },
  ],
  tableButs: [
    {
      butType: "UPDATE",
      name: "修改",
      color: "success",
      permi: [],
      icon: "Edit",
    },
  ],
  columns: [
    {
      type: "selection",
    },
    {
      type: "index",
      title: "序号",
    },
    {
      title: "用户ID",
      field: "userId",
    },
    {
      title: "手机号",
      field: "phone",
    },
    {
      title: "图片",
      preview: true,
      field: "image",
    },
  ],
});
// 搜索配置
const searchFormConfig = reactive<any>({
  handlerSubmit: (formModels: any) => {
    // 提交的数据
    console.log("formModels", formModels);
    return tableRef.value.fetchData({ isResetPageNumber: true });
  },
  formModelValues: {
    phone: "17621959589",
  },
  formConfigList: [
    {
      componentType: "text",
      label: "手机号",
      type: "text",
      placeholder: "请输入手机号",
      key: "phone",
      maxlength: 11,
    },
    {
      componentType: "text",
      type: "text",
      label: "商户号",
      formatter: noNumericToBlank,
      placeholder: "请输入商户号",
      key: "mercId",
    },
    {
      componentType: "date",
      type: "daterange",
      dateFormat: "YYYY-MM-DD",
      label: "时间选择",
      placeholder: "选择时间选择",
      shortcuts: shortcuts,
      disabledDate: disabledDate,
      key: "dateRange",
    },
  ],
});

const formConfig = reactive({
  handlerUpload: async (file, formConfig) => {
    console.log(formConfig);
    let formData = new FormData();
    formData.append("file", file.file);
    return Promise.resolve();
  },
  handlerSubmit: (formModels) => {
    console.log(formModels);
    return Promise.resolve();
  },
  formModelValues: {
    mobilePhone: "17621959589",
  },
  formConfigList: [
    {
      componentType: "text",
      label: "手机号格式化",
      type: "text",
      placeholder: "请输入手机号",
      key: "mobilePhone",
      formatter: mobileFormat,
      maxlength: 13,
      rules: [
        {
          required: false,
          message: "请输入合法的11位手机号",
          validator: (rule, value, callback) => {
            if (!isMobile(value.replace(/\s/gi, ""))) {
              callback(new Error("请输入合法的11位手机号"));
            } else {
              callback();
            }
          },
        },
      ],
    },
    {
      componentType: "text",
      label: "身份证",
      type: "text",
      placeholder: "请输入身份证",
      key: "card",
      formatter: cardFormat,
      maxlength: 20,
      rules: [
        {
          required: false,
          message: "请输入合法18位身份证号",
          validator: (rule, value, callback) => {
            if (!isCard(value.replace(/\s/gi, ""))) {
              callback(new Error("请输入合法18位身份证号"));
            } else {
              callback();
            }
          },
        },
      ],
    },
    {
      componentType: "text",
      label: "银行卡号",
      type: "text",
      placeholder: "请输入银行卡号",
      key: "bankCard",
      formatter: bankCardFormat,
      maxlength: 24,
      rules: [{ required: true, message: "请输入银行卡号" }],
    },
    {
      label: "验证码",
      componentType: "sms",
      type: "text",
      formatter: noNumericToBlank,
      placeholder: "请输入验证码",
      beforeValidateKey: ["mobilePhone"],
      key: "smsCode",
      handlerCountdown: (countdown) => {
        countdown();
      },
      maxlength: 6,
      rules: [
        {
          required: false,
          message: "请输入6位数字验证码",
          validator: (rule, value, callback) => {
            if (!isSMs(value)) {
              callback(new Error("请输入6位数字验证码"));
            } else {
              callback();
            }
          },
        },
      ],
    },
    {
      componentType: "text",
      type: "text",
      label: "商户号",
      formatter: noNumericToBlank,
      placeholder: "请输入商户号",
      key: "mercId",
      rules: [{ required: false, message: "请输入商户号" }],
    },
    {
      componentType: "switch",
      label: "状态",
      defaultValue: true,
      key: "off",
    },
    {
      componentType: "checkbox",
      label: "复选",
      key: "checkboxs",
      rules: [{ required: false, message: "请选择复选框组" }],
      options: [
        {
          label: "男",
          value: 1,
        },
        {
          label: "女",
          value: 2,
        },
      ],
    },
    {
      componentType: "radio",
      label: "单选",
      key: "radio",
      defaultValue: "m",
      rules: [{ required: false, message: "请选择单选" }],
      options: [
        {
          label: "男",
          value: "s",
        },
        {
          label: "女",
          value: "m",
        },
      ],
    },
    {
      componentType: "stepper",
      label: "步进器",
      key: "stepper",
    },
    {
      componentType: "rate",
      label: "评分",
      key: "rate",
    },
    {
      componentType: "slider",
      label: "滑块",
      key: "slider",
    },
    {
      componentType: "select",
      label: "选择城市",
      placeholder: "选择城市",
      key: "city",
      confirmCallback: (formModel, formModels, opt) => {
        console.log(formModel);
        console.log(formModels);
        console.log(opt);
      },
      options: [
        { label: "杭州", value: "Hangzhou" },
        { label: "宁波", value: "Ningbo" },
        { label: "温州", value: "Wenzhou" },
        { label: "绍兴", value: "Shaoxing" },
        { label: "湖州", value: "Huzhou" },
      ],
      rules: [{ required: false, message: "选择城市" }],
    },
    {
      componentType: "select",
      label: "选择城市模糊查询",
      placeholder: "选择城市",
      key: "cityFuzzy",
      remote: true,
      getOptions: () => {
        let list = [
          { label: "杭州1222", value: "Hangzhou" },
          { label: "宁波2", value: "Ningbo" },
          { label: "温州", value: "Wenzhou" },
          { label: "绍兴", value: "Shaoxing" },
          { label: "湖州", value: "Huzhou" },
        ];
        return Promise.resolve(list);
      },
      confirmCallback: (formModel, formModels, opt) => {
        console.log(formModel);
        console.log(formModels);
        console.log(opt);
      },
      rules: [{ required: false, message: "选择城市" }],
    },
    {
      componentType: "date",
      type: "daterange",
      dateFormat: "YYYY-MM-DD",
      label: "时间选择",
      placeholder: "选择时间选择",
      shortcuts: shortcuts,
      disabledDate: disabledDate,
      key: "dateRange",
      rules: [{ required: false, message: "选择时间选择" }],
    },
    {
      componentType: "uploader",
      label: "文件上传",
      maxCount: 5,
      key: "uploader",
      tip: "jpg/png files with a size less than 2000KB",
      rules: [{ required: false, message: "请选择文件上传" }],
      beforeRead: (file) => {
        console.log(file);
        // 可拦截
        return true;
      },
    },
  ],
});
</script>
